<template>
  <el-dialog
    :title="dialogTitle"
    :model-value="visible"
    width="480px"
    :close-on-click-modal="false"
    @update:model-value="updateVisible"
    @close="handleClose"
  >
    <el-form 
      ref="formRef" 
      :model="form" 
      :rules="formRules" 
      label-width="120px"
    >
      <el-form-item label="课程">
        <el-text>{{ selectedScore.courseName || '未知课程' }}</el-text>
      </el-form-item>
      
      <el-form-item label="学生">
        <el-text>{{ selectedScore.studentName || '未知' }} 
          ({{ selectedScore.studentNumber || '未知学号' }})
        </el-text>
      </el-form-item>
      
      <!-- 组成部分成绩特有字段 -->
      <el-form-item v-if="type === 'part'" label="成绩组成">
        <el-text>{{ selectedScore.scoreComponentName || '未知' }}</el-text>
      </el-form-item>
      
      <el-form-item v-if="type === 'part'" label="比例">
        <el-text>{{ selectedScore.proportion ? selectedScore.proportion + '%' : '未知' }}</el-text>
      </el-form-item>
      
      <!-- 最终成绩特有字段 -->
      <el-form-item v-if="type === 'final'" label="计分方式" prop="scoreTypeId">
        <el-select v-model="form.scoreTypeId" placeholder="选择计分方式" style="width: 100%;">
          <el-option 
            v-for="scoreType in scoreTypes" 
            :key="scoreType.id" 
            :label="scoreType.name" 
            :value="scoreType.id">
          </el-option>
        </el-select>
      </el-form-item>
      
      <el-form-item label="成绩" prop="score">
        <el-input-number 
          v-model="form.score" 
          :min="0" 
          :max="100" 
          :precision="1"
          controls-position="right"
          style="width: 100%;"
        ></el-input-number>
      </el-form-item>
      
      <!-- 最终成绩特有字段 -->
      <el-form-item v-if="type === 'final'" label="是否通过" prop="isPass">
        <el-switch v-model="form.isPass"></el-switch>
      </el-form-item>
      
      <el-form-item v-if="type === 'final'" label="是否补考" prop="isMakeup">
        <el-switch v-model="form.isMakeup"></el-switch>
      </el-form-item>
    </el-form>
    
    <template #footer>
      <el-button @click="handleCancel">取消</el-button>
      <el-button type="primary" @click="handleSubmit">确定</el-button>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref, computed, watch } from 'vue'

const props = defineProps({
  visible: {
    type: Boolean,
    default: false
  },
  type: {
    type: String,
    default: 'final', // 'final' 或 'part'
    validator: (value) => ['final', 'part'].includes(value)
  },
  selectedScore: {
    type: Object,
    default: () => ({})
  },
  scoreTypes: {
    type: Array,
    default: () => []
  }
})

const emit = defineEmits(['update:visible', 'submit'])

const formRef = ref()
const form = ref({
  score: null,
  scoreTypeId: null,
  isPass: false,
  isMakeup: false
})

const dialogTitle = computed(() => {
  return props.type === 'final' ? '编辑最终成绩' : '编辑组成部分成绩'
})

const formRules = computed(() => {
  const rules = {
    score: [
      { required: true, message: '请输入成绩', trigger: 'blur' },
      { type: 'number', min: 0, max: 100, message: '成绩必须在0-100之间', trigger: 'blur' }
    ]
  }
  
  if (props.type === 'final') {
    rules.scoreTypeId = [
      { required: true, message: '请选择计分方式', trigger: 'change' }
    ]
  }
  
  return rules
})

// 监听选中的成绩数据变化，更新表单
watch(() => props.selectedScore, (newScore) => {
  if (newScore && Object.keys(newScore).length > 0) {
    form.value = {
      score: newScore.score,
      scoreTypeId: newScore.scoreTypeId,
      isPass: newScore.isPass || false,
      isMakeup: newScore.isMakeup || false
    }
  }
}, { immediate: true, deep: true })

const updateVisible = (value) => {
  emit('update:visible', value)
}

const handleClose = () => {
  emit('update:visible', false)
}

const handleCancel = () => {
  handleClose()
}

const handleSubmit = async () => {
  if (!formRef.value) return
  
  try {
    await formRef.value.validate()
    emit('submit', { ...form.value })
    handleClose()
  } catch (error) {
    // 表单验证失败，不进行提交
  }
}
</script>

<style scoped>
.el-text {
  color: #606266;
}
</style>
